<template>
  <div class="cinema-schedule">
    <div class="cinema_left">
      <i class="iconfont icon-zuobian-copy" @click="$router.go(-1)"></i>
    </div>
    <van-sticky>
      <div class="cinema_title" type="primary">{{ CinemaList.name }}</div>
    </van-sticky>

    <div class="cinema-info">
      <div class="tags">
        <div class="tag" v-for="(t,index) in CinemaList.services" :key="index">{{ t.name }}</div>
        <i class="iconfont icon-xiangyou1"></i>
      </div>

      <div class="address">
        <div class="address_left">
          <i class="iconfont icon-dingwei"></i>
        </div>
        <div class="address-des">{{ CinemaList.address }}</div>
        <a href="tel:010-63015188">
          <i class="iconfont icon-dianhua"></i>
        </a>
      </div>
    </div>
    <div class="showtime-movies">
      <div class="bg">
        <div class="bg_img" :style="{backgroundImage:'url('+selectedMovie.poster+')'}"></div>
      </div>
      <ul ref="slider" id="slider">
        <li v-for="(t, index) in moviesInfo" :key="index">
          <a :class="{ selected: !index }" :data-index="index" :data-id="t.filmId">
            <img :src="t.poster"/>
          </a>
        </li>
      </ul>
    </div>

    <van-sticky :offset-top="40">
      <div class="film-info">
        <div class="film-head">
          <span class="film-name">{{selectedMovie.name}}</span>
          <span class="film-score">{{selectedMovie.grade}}</span>
          <span class="film-score-unit">分</span>
        </div>
        <div class="film-desc">
          {{selectedMovie.category}} | {{selectedMovie.runtime}}分钟 | {{selectedMovie.director}} | 大卫·叶茨 埃迪·雷德梅恩
          艾莉森·苏朵儿 裘德·洛 凯瑟琳·沃特森
        </div>
        <div class="film-more">
          <i class="iconfont icon-xiangyou1"></i>
        </div>
      </div>
    </van-sticky>
    <van-tabs @click-tab="onClickTab" title-active-color="#ff5f16" line-width="80px" line-height="2px" color="#ff5f16" >
      <van-tab v-for="(t, index) in selectedMovie.showDate" :key="index" :title="Data(t)"></van-tab>
    </van-tabs>
    
    <!-- <router-view></router-view> -->
    <CinemaData />
    <!-- <div class="schedule-list">
      <div v-for="(t,index) in Scheduling" :key="index">
        <div class="disable schedule-item">
          <div class="left" >
            <div class="start-at">{{new Date(t.showAt * 1000).getHours()}}:{{new Date(t.showAt * 1000).getMinutes()}}</div>
            <div class="end-at">{{new Date(t.endAt * 1000).getHours()}}:{{new Date(t.endAt * 1000).getMinutes()}}散场</div>
          </div>
          <div class="middle">
            <div class="language">{{t.filmLanguage}}{{t.imagery}}</div>
            <div class="hall">{{t.hallName}}</div>
          </div>
          <div class="right">
            <div class="lowest-price">
              <span class="price-icon">￥</span>
              <span class="jiage">{{t.salePrice/100}}</span>
            </div>
            <div class="buy-ticket">购票</div>
          </div>    
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
import { reactive, ref, toRefs } from "@vue/reactivity";
import MovieWallBuilder from "@/utils/MovieWallBuilder.js";
import { CinemaVotesAPI } from "@/api/index.js";
import { FilmSelectionAPI } from '@/api/index.js'
// import { FilmSchedulingAPI } from '@/api/index.js'
import { computed, nextTick, onMounted } from "@vue/runtime-core";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import CinemaData from '@/components/cinemaData'

export default {
  // data() {
  //   return {
  //     moviesInfo: [],
  //     movieWall: null,
  //     active: 0,
  //   };
  // },
  // methods: {
  //     async CinemaVotesList(){
  //      const { data:res } = await CinemaVotesAPI({id:this.$route.params.id})
  //      if(res.msg=='ok'){
  //      console.log(res);
  //      this.moviesInfo = res.data.films
  //      }
  //      this.$nextTick(function () {
  //           this.buildMovieWall();
  //      });
  //    },

  //   buildMovieWall: function () {
  //      var self = this;
  //     self.movieWall = new MovieWallBuilder({
  //       el: "#slider",
  //     });
  //   },
  //   bot(img) {
  //     console.log(img);
  //   },
  //   Menu(e){
  //     let mytype = e.currentTarget.getAttribute("data-id");
  //     console.log(mytype);
  //   },
  // },
  // created() {
  //   this.CinemaVotesList();
  // },
  // mounted() {},
 
  name:'cinema',
  components:{
    CinemaData
  },
  
  setup(props) {
    const root = reactive({
      index:0,
      moviesInfo:[],//全部电影
      CinemaList:{},//当前电影
       Scheduling:[],//电影排期
      selectedMovie:[],//当前选定电影
      movieWall:null,
      // 选中的电影索引
      selectedMovieIndex:0,
      // 选中的电影时间索引
      selectedDateIndex:0,
      timeAt:null
    });
    const router = useRouter();
    const store = useStore();
    const slider = ref(null);

  

  //   const Menu = (event) =>{
  //   let mytype = event.currentTarget.getAttribute("data-id");
  //   // console.log(mytype);
  // }

  // const onClick = (e)=>{
  //  let mytype = e.currentTarget.getAttribute("data-id");
  //   // console.log(mytype);
  // }


    //转时间戳
   const Data = computed(()=>{
      return function(val){
        let date = new Date(val*1000)
        let month = date.getMonth() +1//月份
        let day = date.getDate()//每日
        let week = date.getDay()//星期
        let MM = day - new Date().getDate()//电影上映的时间减去当天时间得到0-7数字，0是今天
        let time = ''
       if (MM == 0 || MM == 1 || MM == 2) {
       
        switch (MM) { 
          case 0:
            time = "今天";
            break;
          case 1:
            time = "明天";
            break;
          case 2:
            time = "后天";
            break;
        }
      } else {
        switch (week) {
          case 1:
            time = "周一";
            break;
          case 2:
            time = "周二";
            break;
          case 3:
            time = "周三";
            break;
          case 4:
            time = "周四";
            break;
          case 5:
            time = "周五";
            break;
          case 6:
            time = "周六";
            break;
          case 0:
            time = "周日";
            break;
          default:
        }
      }
      
      return `${time}${month}月${day}日`;
      }
    })

   

    // 每部电影的数据
    const CinemaVotesList = async ()=>{
      const { data:res } = await CinemaVotesAPI({id:router.currentRoute.value.params.cinemaId})//同
      if(res.msg=='ok'){
        root.moviesInfo=res.data.films

        //  当期选中电影索引
        root.selectedMovieIndex = findSelectedIndex(root.moviesInfo , router.currentRoute.value.params.filmId)

        // 当前所展示的影片
        root.selectedMovie = root.moviesInfo[root.selectedMovieIndex]
        
      }
      nextTick(function () {
        buildMovieWall();
   });
 }



    const FilmSelectionList = async ()=> {
      const { data:res } = await FilmSelectionAPI({id:router.currentRoute.value.params.cinemaId})
      if (res.msg == 'ok') {
        root.CinemaList = res.data.cinema
      }
    }


    // 电影院日期排序信息
    // const FilmScheduling = async ()=>{
    //   const { data:res } = await FilmSchedulingAPI({filmId:router.currentRoute.value.params.filmId, cinemaId:router.currentRoute.value.params.cinemaId,data:1650643200});
    //    root.Scheduling = res.data.schedules
    //   //  console.log(res);
    // }
    
    const findSelectedIndex = (data ,key, filmId)=>{
       if (data.length <=0 || !filmId) return 0
       for(let i=0; i<data.length; i++){
         if(data[i].filmId == filmId){
           return i
         }
       }
    }
    // console.log(router.currentRoute.value.params.cinemaId);
     //console.log(router.currentRoute.value.params.filmId);
     //console.log(router.currentRoute.value.params.showDateId);
    // console.log('========================================');
    const onClickTab = (val)=>{
     
   
    }

    const buildMovieWall =() =>{   
       root.movieWall = new MovieWallBuilder({
         el: "#slider",
         callback:(index)=>{
           if (index == root.selectedMovieIndex) return
           //当前影片的索引
          root.selectedMovieIndex = index
          //  当前播放的影片信息 
          root.selectedMovie = root.moviesInfo[index]

          // let data = root.timeAt = root.selectedMovie.showDate[index]
       
         }
       });
     }
    
    onMounted(()=>{
      CinemaVotesList()
      FilmSelectionList()
      // FilmScheduling()
    })
    return {
      ...toRefs(root),
      // Menu,
      // onClick,
      Data,
      onClickTab
    }
  }
};
</script>

<style lang="less" scoped>
p {
  height: 100px;
  border: 1px solid red;
}
.cinema-schedule {
  width: 100%;
  overflow: hidden;
  padding-top: 44px;
  background: #fff;
  min-height: 100vh;

  .cinema_left {
    position: fixed;
    top: 0;
    height: 44px;
    line-height: 44px;
    padding-left: 15px;
    z-index: 303;
  }
  .cinema_title {
    width: 100%;
    padding: 0 15px;
    text-align: center;
    background: white;
    height: 44px;
    line-height: 44px;
  }
}

.tags {
  display: flex;
  justify-content: center;
  font-size: 15px;
  color: #ffb232;
  overflow: hidden;
  position: relative;
  padding: 5px 0 15px;
  align-items: center;
  border-bottom: 1px solid #ededed;
  .tag {
    position: relative;
    padding: 0 6px;
    margin: 0 2.5px;
    font-size: 10px;
  }
  .tag::after {
    content: " ";
    transform: scale(0.5);
    position: absolute;
    border: 1px solid #ffb232;
    top: -50%;
    right: -50%;
    bottom: -50%;
    left: -50%;
    border-radius: 4px;
    border-radius: 1px;
  }
}

.address {
  display: flex;
  height: 50px;
  align-items: center;
  justify-content: space-evenly;
  .address-des {
    font-size: 14px;
    height: 20px;
    padding: 0 12px;
    flex: 1;
    position: relative;
    color: #191a1b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 72%;
  }

  .address_left {
    .iconfont {
      font-size: 18px;
    }
  }
  a {
    .iconfont {
      font-size: 18px;
      color: #191a1b;
    }
  }
}
.film-info {
  width: 100%;
  background: #fff;
  height: 80px;
  padding: 15px 0;
  position: relative;
  border-bottom: 1px solid #ededed;
  .film-head {
    margin-bottom: 10px;
    text-align: center;
    line-height: 18px;

    .film-name {
      font-size: 15px;
      color: #191a1b;
      padding-right: 5px;
    }
    .film-score {
      font-size: 16px;
      font-style: italic;
      color: #ffb232;
    }

    .film-score-unit {
      font-size: 10px;
      color: #ffb232;
    }
  }

  .film-desc {
    text-align: center;
    height: 18px;
    color: #797d82;
    font-size: 13px;
    padding: 0 12%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .film-more {
    position: absolute;
    right: 10px;
    top: 27px;
    .iconfont {
      color: #5b5b5b;
    }
  }
}
/deep/.van-tabs__wrap {
  border-bottom: 1px solid #ededed;
}

// .schedule-list {
//   min-height: calc(100vh - 44px);

//   .schedule-item {
//     border-bottom: 1px solid #ededed;
//     height: 74px;
//     padding: 15px 15px;
//     background: #fff;
//     justify-content: space-between;
//     display: flex;
//     .left {
//       width: 84px;
//       .start-at {
//         font-size: 15px;
//         color: #191a1b;
//       }
//       .end-at {
//         font-size: 13px;
//         color: #797d82;
//         margin-top: 2px;
//       }
//     }
//     .middle {
//       width: calc(100% - 210px);
//       .language {
//         font-size: 15px;
//         color: #191a1b;
//       }
//       .hall {
//         font-size: 13px;
//         color: #797d82;
//         margin-top: 2px;
//         overflow: hidden;
//         text-overflow: ellipsis;
//         white-space: nowrap;
//       }
//     }

//     .right {
//       display: flex;
//       color: #ff5f16;
//       padding: 10px 0;
//       line-height: 25px;
//       .lowest-price {
//         padding-right: 20px;
//         font-size: 15px;
//         .price-icon {
//           font-size: 10px;
//         }
//         .jiage {
//           font-size: 15px;
//         }
//       }
//       .buy-ticket {
//         height: 25px;
//         width: 50px;
//         border-radius: 2px;
//         text-align: center;
//         border: 1px solid #ff5f16;
//         font-size: 12px;
//       }
//     }
//   }
// }

/* 影片信息 */
.showtime-movies {
  position: relative;
  overflow-x: hidden;
  height: 160px;
  background: #5b5b5b;
}
//背景
.bg{
  padding: 15px 0;
  position: absolute;
  width: 100%;
  height: 160px;
}

.bg_img{
 filter: blur(30px);
  width: 100%;
  height: 100%;
  background-size: 100%;
}
/* 三角角标 */
.showtime-movies:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  line-height: 0;
  font-size: 0;
  border: 5px dashed transparent;
  border-bottom: 8px solid #fff;
  bottom: 0;
  left: 50%;
  margin-left: -1.92px;
}

#slider {
  white-space: nowrap; /*//处理块元素中的空白符和换行符，这个属性保证图片不换行*/
  font-size: 0; /* 去掉 inline-block 间距*/
  position: absolute;
  height: 100%;
}

#slider li {
  list-style-type: none;
  display: inline-block;
  height: 100%;
}

.showtime-movies a {
  display: inline-block;
  width: 80px;
  height: 105px;
  margin: 20px 10px;
  /* -webkit-transform: scale(.88);
  -webkit-transform-origin: bottom center; */
  transform: scale(0.88);
  transform-origin: bottom center;
  border: 1px solid #5b5b5b;
  transition: all 0.5s;
}

a.selected {
  /* -webkit-transform: scale(1); */
  transform: scale(1);
  border-color: #fff;
}

.showtime-movies img {
  width: 100%;
  height: 100%;
}

/* 影片信息 */

.showtime-mname {
  background: #fff;
  border-bottom: 0.32px solid #e6e6e6;
}

.showtime-mname .movie-relative {
  align-items: center;
}
</style>